<template>
  <div>
    <!-- 顶部搜索 -->
    <mynav />
    <!-- 轮播图 -->
    <swiper ref="mySwiper" :options="swiperOptions" class="dalunbo" @click="clickme">
      <swiper-slide class="lunbo">
        <img src="../../assets/images/shouye01.png" alt="" />
      </swiper-slide>
      <swiper-slide class="lunbo">
        <img src="../../assets/images/shouye02.png" alt="" />
      </swiper-slide>
      <swiper-slide class="lunbo">
        <img src="../../assets/images/shouye03.png" alt="" />
      </swiper-slide>
      <swiper-slide class="lunbo">
        <img src="../../assets/images/shouye04.png" alt="" />
      </swiper-slide>
      <swiper-slide class="lunbo">
        <img src="../../assets/images/shouye05.png" alt="" />
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
    <!-- 内容 -->
    <mycontent :getdata="nature" />
    <mycontent :getdata="humanity" />
    <mycontent :getdata="country" />
  </div>
</template>

<script>
import api from "../../api";
import mynav from "../../components/mynav";
import mycontent from "../../components/mycontent";
export default {
  data() {
    return {
      swiperOptions: {
        pagination: {
          el: ".swiper-pagination",
        },
        loop: true,
        autoplay: true,
      },
      nature: {},
      humanity: {},
      country: {},
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    },
  },
  components: {
    mynav,
    mycontent,
  },
  mounted() {
    this.swiper.slideTo(5, 5000, false);
    api
      .nature()
      .then((res) => {
        console.log(res.data);
        if (res.data.status === 200) {
          this.nature = res.data.result;
        }
      })
      .catch((err) => {
        console.log(err);
      });
    api
      .humanity()
      .then((res) => {
        console.log(res.data);
        if (res.data.status === 200) {
          this.humanity = res.data.result;
        }
      })
      .catch((err) => {
        console.log(err);
      });
    api
      .country()
      .then((res) => {
        console.log(res.data);
        if (res.data.status === 200) {
          this.country = res.data.result;
        }
      })
      .catch((err) => {
        console.log(err);
      });
  },
  methods:{
     clickme(){
        this.$router.push('/tuijian')
      }
  }
};
</script>

<style lang="less" scoped>
.dalunbo {
  margin-top: 1rem;
  height: 4rem;
}
.lunbo {
  width: 100%;
  height: 4rem;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>